<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>推广分配系统</title>
    <link type="text/css" rel="stylesheet" href="css/bootstrap.min.css">
    <link type="text/css" rel="stylesheet" href="css/bootstrap-theme.min.css">
    <style>
        .navbar-fixed-top + * {
            padding-top: 70px;
        }
    </style>
    <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/layer/layer.js"></script>
</head>
<body>
<div class="container">
    <form class="form-horizontal" method="" action="" enctype="multipart/form-data" style="margin-top: 20px;">
        <div class="form-group">
            <label class="control-label col-sm-2">标题：</label>
            <div class="col-sm-8">
                <input name="" class="form-control" type="text" value="" required>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-2">背景色：</label>
            <div class="col-sm-8">
                <input name="" class="form-control" type="text" value="" required>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-2">类型：</label>
            <div class="col-sm-8">
                <select name="" class="form-control" required>
                    <option value="" selected="selected">phone</option>
                    <option value="">PC</option>
                    <option value="">pad</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-2">缩略图：</label>
            <div class="col-sm-8">
                <img id="imgPreview" src="" width="200px"/>
                <input name="" type="file" onchange="uploadImg(this);" required>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-2">上传zip：</label>
            <div class="col-sm-8">
                <input name="" type="file" required>
            </div>
        </div>

        <div class="col-sm-2">
            <input style="float: right;margin-top: 20px;" class="btn btn-success" type="submit" value="提交">
        </div>

    </form>
</div>
<script>
    $("form").submit(function () {  //使用ajax表单提交
        var $form = $(this);
        var form = new FormData(this);
        $.ajax({ //ajax提交包含文件的表单
            url: $form.attr('action'),
            type: $form.attr('method'),
            data: form,
            processData: false, //应对FormData对象的特殊处理
            contentType: false, //应对FormData对象的特殊处理
            dataType: "json",
            success: function (data) {
                var status = data.status;
                var info = data.info;
                layer.msg(info); //提示信息
                if (status == 1) { //如果成功
                    setTimeout(function () { //延迟关闭，让提示信息显示一段时间
                        var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                        parent.layer.close(index); //关闭窗口
                        parent.location.reload(); //刷新父页面
                    }, 1000);
                }
            },
            error: function (err) {
                layer.msg("未知错误发生了");
                console.log({"未知错误": arguments});
            }
        });
        return false; //阻止页面的表单提交
    });

    function uploadImg(e) {  //图片上传前的本地读取预览
        if (e.files && e.files[0]) {
            var fileObj = e.files[0]; // 获取文件对象
            var localPath = e.value;
            var fileType = (e.value.substring(localPath.lastIndexOf("."), e.value.length)).toLowerCase();
            if ((fileType != '.jpg') && (fileType != '.gif') && (fileType != '.jpeg') && (fileType != '.png') && (fileType != '.bmp')) {
                //提示
                layer.msg('图片格式错误，请重新选择');
                $("#imgPreview").attr('src', ''); //清除图片
                $(e).val(''); //清除图片值
                return;
            }
            //文件操作，本地图片读取
            var reader = new FileReader();
            reader.onload = function (evt) {
                //读取完成的监听
                var imgSrc = evt.target.result;
                $("#imgPreview").attr('src', imgSrc); //显示图片
            };
            reader.readAsDataURL(fileObj);//读取本地文件
        }
    }

    $(function () {  //处理图片缓存问题
        var imgSrc = $("#imgPreview").attr("src");
        $("#imgPreview").attr('src', imgSrc + '?t=' + Math.random());
    });

</script>
</body>
</html>